<!-- 统计卡片组件 -->
<template>
  <el-card class="stats-card">
    <div class="stats-content">
      <div class="icon-wrapper" :style="{ backgroundColor: color || '#409EFF' }">
        <component :is="icon" style="width: 24px; height: 24px; color: #fff;" />
      </div>
      <div class="stats-info">
        <div class="title">{{ title }}</div>
        <div class="value">{{ value }}</div>
        <div class="trend-wrapper">
          <div v-if="trend !== undefined" class="trend" :class="trend >= 0 ? 'up' : 'down'">
            {{ Math.abs(trend) }}%
            <el-icon v-if="trend >= 0"><ArrowUp /></el-icon>
            <el-icon v-else><ArrowDown /></el-icon>
          </div>
          <div v-else class="trend-placeholder"></div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
import type { Component } from 'vue'

defineProps<{
  icon: Component
  title: string
  value: string | number
  trend?: number
  color?: string
}>()
</script>

<style lang="scss" scoped>
.stats-card {
  height: 108px;
  
  :deep(.el-card__body) {
    height: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
  }
  
  .stats-content {
    display: flex;
    align-items: center;
    width: 100%;
    
    .icon-wrapper {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      flex-shrink: 0;
      
      :deep(svg), :deep(.icon) {
        width: 24px !important;
        height: 24px !important;
        color: #fff !important;
      }
    }
    
    .stats-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 4px 0;
      
      .title {
        font-size: 14px;
        color: #909399;
      }
      
      .value {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
        line-height: 1;
      }
      
      .trend-wrapper {
        height: 20px;  // 固定高度
        
        .trend {
          font-size: 12px;
          display: flex;
          align-items: center;
          gap: 4px;
          
          &.up {
            color: #67C23A;
          }
          
          &.down {
            color: #F56C6C;
          }
          
          .el-icon {
            font-size: 12px;
          }
        }
        
        .trend-placeholder {
          height: 20px; // 与trend相同的高度
        }
      }
    }
  }
}
</style> 